<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩计算</title>
    <script src="../js/vue.js"></script>
    <style>
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
    table.gridtable th{
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }
    table.gridtable td{
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }        
    </style>
</head>
<body>
    <div id="app">
        <table class="gridtable">
            <tr>
                <th>学科</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>语文</td>
                <td><input type="text" v-model.number="chinese"></td>
            </tr>            
            <tr>
                <td>数学</td>
                <td><input type="text" v-model.number="math"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model.number="english"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td><input type="text" v-model.number="sum"></td>
            </tr>
            <tr>
                <td>平均分</td>
                <td><input type="text" v-model.number="avg"></td>
            </tr>             
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                chinese: 90,
                math: 90,
                english: 90
            },
            computed: {
                sum: function() {
                    return this.chinese + this.math + this.english;
                },
                avg: function() {
                    return Math.round(this.sum / 3);
                }
            }            
        })
    </script>
</body>
</html>